<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI - Draggable Demos &amp; Documentation</title>
    
    <meta name="keywords" content="jquery,user interface,ui,widgets,interaction,javascript" />
    <meta name="description" content="jQuery UI is the official jQuery user interface library. It provides interactions, widgets, effects, and theming for creating Rich Internet Applications." />
    <meta name="author" content="The jQuery Project" />
    
    <link rel="shortcut icon" href="/images/favicon.ico" />
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <script src="/js/demos.js" type="text/javascript"></script>
    <script src="/themeroller/themeswitchertool/" type="text/javascript"></script>
    <style type="text/css">
    
    #jq-books{width:200px;float:right;margin-right:0}
    #jq-books li{line-height:1.25em;margin:1em 0 1.8em;clear:left}
    #home-content-wrapper #jq-books a.jq-bookImg{float:left;margin-right:10px;width:55px;height:70px}
    #jq-books h3{margin:0 0 .2em 0}
    #home-content-wrapper #jq-books h3 a{font-size:1em;color:black;}
    #home-content-wrapper #jq-books a.jq-buyNow{font-size:1em;color:white;display:block;background:url(http://static.jquery.com/files/rocker/images/btn_blueSheen.gif) 50% repeat-x;text-decoration:none;color:#fff;font-weight:bold;padding:.2em .8em;float:left;margin-top:.2em;}
    
    </style>
</head>

<body id="demos">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<div id="wrapper">
    <div id="banner">
        <h1 class="logo">
            <a href="/home" title="jQuery UI"><span>jQuery UI</span></a>
        </h1>
        
    </div>
    <div id="content-wrapper">
        <div id="content">
        <div class="content-top"></div>     <div class="content">
<script type="text/javascript">
var section = "demos/draggable";
</script>

<div class="content-body">
    <table cellspacing="0" cellpadding="0" class="layout-grid">
        <tr>
            <td>

        <td class="normal">        
                        <div id="demo-header">
                            <h2>alice & company</h2>

    <style type="text/css">
    #draggable, #draggable2{ width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script type="text/javascript">
    $(function() {
    	$("#draggable").draggable({ revert: true });
		$("#draggable2").draggable({ revert: true, helper: 'clone' });
    });
    </script>

<div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<div id="draggable2" class="ui-widget-content">
    <p>Drag me around</p>
</div>

</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
